<template>
  <div class="user-info-view">
    <div class="user-header">
      <span>用户</span>
      <div class="user-header-right">
        <base-icon name="iconfont-general gen-yanjingkaiqi" :size="16" color="var(--bd)" />
        <span>隐藏</span>
      </div>
    </div>

    <div class="user-content">
      <div class="user-profile">
        <div class="user-name">
          <span class="name">{{ orderData.customerName || "Geoff名字" }}</span>
          <span class="user-tag">30天新用户</span>
        </div>

        <div class="user-phone">
          <span class="label">手机号码：</span>
          <span class="value">{{ orderData.customerPhone || "17600300012" }}</span>
        </div>

        <div class="user-address">
          <span class="label">地址：</span>
          <span class="value">{{ orderData.address || "广西壮族自治区桂林市临桂区..." }}</span>
        </div>

        <div class="user-registered">
          <span class="label">注册手机：</span>
          <span class="value">{{ orderData.registeredPhone || "17600300012" }}</span>
        </div>

        <div class="user-history">
          <span class="history-link"
            >历史数据
            <base-icon name="iconfont ic-xiajiantou1" :size="12" />
          </span>
        </div>
      </div>
      <div v-if="isEnterpriseOrder" class="order-guarantee">
        <div class="note-item">
          <span class="label">担保商户：</span>
          <span class="value">{{ orderData.guaranteeMerchant || "Geoff名字" }}</span>
        </div>

        <div class="note-item">
          <span class="label">担保手机：</span>
          <span class="value">{{ orderData.guaranteePhone || "17600300012" }}</span>
        </div>

        <div class="note-item">
          <span class="label">担保状态：</span>
          <span class="value guarantee-status" :class="getGuaranteeStatusClass(orderData.guaranteeStatus)">
            {{ orderData.guaranteeStatus || "待确认" }}
          </span>
        </div>
      </div>
      <div class="order-notes">
        <div class="note-item">
          <span class="label">订单备注：</span>
          <span class="value">{{ orderData.orderNote || "跟进人大鱼" }}</span>
        </div>

        <div class="note-item">
          <span class="label">备注时间：</span>
          <span class="value">{{ orderData.noteTime || "2025-03-20 09:15:18" }}</span>
        </div>

        <div class="note-item">
          <span class="label">认领人：</span>
          <span class="value">{{ orderData.claimer || "大鱼" }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  const props = defineProps({
    orderData: {
      type: Object,
      required: false,
      default: () => ({}),
    },
  });

  // 判断是否为企业订单
  const isEnterpriseOrder = computed(() => {
    return props.orderData.orderType === "enterprise";
  });

  // 根据担保状态返回对应的CSS类
  const getGuaranteeStatusClass = status => {
    if (status === "待确认") {
      return "status-pending";
    } else if (status === "已确认") {
      return "status-confirmed";
    }
    return "status-pending"; // 默认状态
  };
</script>

<style lang="scss" scoped>
  .user-info-view {
    background: linear-gradient(180deg, #f4f3f6 0%, rgba(255, 255, 255, 0) 55.29%);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 10px 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    .user-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;
      color: var(--ct1);
      font-weight: 500;
      line-height: 24px;
      margin-bottom: 8px;

      .user-header-right {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        height: 24px;
        border-radius: 100px;
        height: 24px;
        width: 60px;
        background-color: var(--bg);

        span {
          font-size: 12px;
          color: var(--ct2);
          cursor: pointer;
        }
      }
    }

    .user-content {
      .user-profile {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding-bottom: 8px;
        .user-name {
          display: flex;
          align-items: center;
          line-height: 20px;
          gap: 4px;

          .name {
            font-size: 12px;
            font-weight: 500;
            color: var(--ct1);
          }

          .user-tag {
            padding: 0px 8px;
            line-height: 20px;
            background: var(--bg);
            color: var(--bd);
            font-size: 12px;
            border-radius: 4px;
            border: 1px solid var(--bd8);
          }
        }

        .user-phone,
        .user-address,
        .user-registered {
          display: flex;
          align-items: center;
          font-size: 12px;

          .label {
            flex-shrink: 0;
            color: var(--ct3);
          }

          .value {
            color: var(--ct1);
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .user-history {
          .history-link {
            font-size: 12px;
            color: var(--lk);
            cursor: pointer;

            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
      .order-guarantee {
        display: flex;
        flex-direction: column;
        gap: 4px;
        border-top: 1px dashed var(--cb1);
        padding: 8px 0;
      }
      .order-notes {
        padding-top: 8px;
        border-top: 1px dashed var(--cb1);
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .note-item {
        display: flex;
        align-items: center;
        font-size: 12px;

        .label {
          color: var(--ct3);
        }

        .value {
          color: var(--ct1);

          &.guarantee-status {
            font-weight: 500;

            &.status-pending {
              color: var(--dr); // 待确认 - 红色
            }

            &.status-confirmed {
              color: var(--sc); // 已确认 - 其他颜色
            }
          }
        }
      }
    }
  }
</style>
